<template>
    <div class="property">
        <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
        <div class="readonly_flag">
            <span class="undefined_settting" v-if="property.name === '位置数组'" style="margin-right: 10px;"
                :key="objectRefLength">{{ objectRefLength }}个点</span>
            <span class="undefined_settting1" @click.stop="openProvider()" title="设置属性值">⚙</span>
        </div>
        <div v-if="!readonly && defaultValue !== undefined && !(JSON.stringify(objectRef) === JSON.stringify(defaultValue))&&property.name!=='服务地址'"
            class="checkbox" @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true"
            @mouseout="mouseFlag = false">
            <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                :size="14" />
        </div>
    </div>
    <JsonStringProps :title="property.name" :readonly="readonly" :jsonStr="jsonStr" :isShow="jsonStrShow"
        :sampleValue="sampleValue" @getJsonStr="getJsonStr" @changeShow="changeShow">
    </JsonStringProps>
</template>

<script setup lang='ts'>
import { ESGeoVector } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { onBeforeUnmount, onMounted, ref, Ref } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { JsonValue } from "xbsj-xe2/dist-node/xe2-base-utils";
import JsonStringProps from '../commons/JsonStringProps.vue';
import { PropertyCompCallbackFuncParamsType } from "./base";
const mouseFlag = ref(false)
const resetDefult = () => {
    objectRef.value = defaultValue
}
const props = withDefaults(defineProps<{
    property: any, type?: string, lonLatFormat?: any, currentMenu?: any

}>(), {
});
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();
const { property } = props
const readonly = property.readonly
const sampleValue: string | undefined = property.sampleValue
const defaultValue = property.defaultValue
const disposer = createVueDisposer(onBeforeUnmount)
const objectRef = readonly ? toReadonlyVueRef<JsonValue, JsonValue>(disposer, property.reactVar) as Ref<JsonValue> : toVR<JsonValue, JsonValue>(disposer, property.reactVar) as Ref<JsonValue>
const objectRefLength = ref()
const jsonStrShow = ref(false)
const jsonStr = ref('')
const openProvider = () => {
    jsonStr.value = (objectRef.value !== undefined) && JSON.stringify(objectRef.value, undefined, '    ') || defaultValue;
    jsonStrShow.value = true
}
const changeShow = (flag: boolean) => {
    jsonStrShow.value = flag
}
const getJsonStr = (objStr: string) => {
    try {
        objectRef.value = JSON.parse(objStr)
    } catch (error) {
        console.error(error);
    }
    jsonStrShow.value = false
}
let dispose: any
onMounted(() => {
    //@ts-ignore
    objectRefLength.value = objectRef.value ? objectRef.value.length : 0
    if (property.reactVar[0] instanceof ESGeoVector) {
        const scene = property.reactVar[0]
        const po = property.reactVar[1]
        if (po === 'points') {
            dispose = scene.pointsChanged.disposableOn(() => {
                if (scene.points) {
                    objectRefLength.value = scene.points.length
                }
            })
        }
    }
    onBeforeUnmount(() => {
        if (dispose) {
            dispose()
            dispose = undefined
        }
    })
})
</script>

<style scoped>
.property {
    width: 100%;
    display: flex;
}

.item_name {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
}

.readonly_flag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
}

label {
    width: 150px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
}

.prop_edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.undefined_settting,
.undefined_settting1 {
    cursor: pointer;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 3px;
    text-align: center;
}

.undefined_settting1:hover {
    background-color: #383838;
}


.readonly_settting {
    cursor: not-allowed;
    color: #999;
    background-color: #383838;
}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 10px;
}
</style>
